<template>
	<div class="padding-across-10 main" v-loading="loading" element-loading-text="拼命加载中">
		<div class="flex-inline">
			<headerOpreate style="float: left;" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			<div class="block" style="text-align:right;float: right">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<!-- <el-table-column type="selection" align="center" width="50px"></el-table-column> -->
			<el-table-column label="名称" align="center" prop="Name"></el-table-column>
			<el-table-column label="创建时间" align="center" prop="CreateTime"></el-table-column>
			<el-table-column label="创建人" align="center" prop="CreateUid"></el-table-column>
			<el-table-column label="更新时间" align="center" prop="UpdateTime"></el-table-column>
			<!-- <el-table-column label="操作人" align="center" prop="UpdateUid"></el-table-column> -->
			<!-- <el-table-column :label="$t('message.operation')" align="center" width= "200">
				<template slot-scope="scope">
				    <el-button type="primary" size="small" @click="locationDetail(scope.row)"><li class="el-icon-information el-icon--left"></li>详情</el-button>
					<el-button @click="editLocation(scope.row)" type="primary" size="small"><i class="el-icon-edit el-icon--left"></i>编辑</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<div class="block" style="text-align: right;padding-top: 2px;padding-bottom: 5px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<!--创建馆藏地-->
		<el-dialog title="创建层架" v-model="createDialog" :show-close="false" :class="[dialog-tiny-width]">
			<el-form ref="createLocationForm" :model="createLocationForm" :rules="createRules" label-width="100px">
				<el-form-item label="馆藏地名称" prop="name">
					<el-input v-model="createLocationForm.name" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmCreate('createLocationForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!--修改馆藏地名称-->
		<el-dialog title="修改馆藏地信息" v-model="editDialog" :show-close="false" :class="[dialog-tiny-width]">
			<el-form ref="editLocationForm" :model="editLocationForm" :rules="createRules" label-width="100px">
				<el-form-item label="馆藏地名称" prop="name">
					<el-input v-model="editLocationForm.name" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmEdit('editLocationForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../assets/js/common.js'
	import headerOpreate from '../../../components/headerOpreate'
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		data() {
			//回车触发查询按钮
			document.onkeydown = function(event) {
				var e = event || window.event;
				if(e && e.keyCode == 13) { //回车键的键值为13
					$("#searchBookData").click(); //调用登录按钮的登录事件
				}
			};
			return {
				loading:false,
				tableData: [],
				createDialog: false,
				editDialog: false,
				opreateDatas: [{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: '刷新',
						action: 'reloadDatas'
					},
					// {
					// 	show: GloabFun.getUid() == 'admin' ? true : false,
					// 	size: "small",
					// 	type: "primary",
					// 	icon: "el-icon-plus el-icon--left",
					// 	name: "添加",
					// 	action: "createLocation"
					// },
					// {
					// 	show: GloabFun.getUid() == 'admin' ? true : false,
					// 	size: "small",
					// 	type: "primary",
					// 	icon: "el-icon-eleg-icon_download el-icon--left",
					// 	name: "同步",
					// 	action: "syncLocation"
					// },
					// {
					// 	show: GloabFun.getUid() == 'admin' ? true : false,
					// 	size: "small",
					// 	type: "danger",
					// 	icon: "el-icon-delete2 el-icon--left",
					// 	name: "删除",
					// 	action: "deleteLocation"
					// }
				],
				currentPage: 1,
				pageSize: 10,
				totalSize:0,
				createLocationForm: {
					name: ''
				},
				editLocationForm: {
					name:'',
					keyid:''
				},
				createRules:{
					name: [{
						required: true,
						message: "名称不能为空",
						trigger: 'blur'
					}]
				},
				multipleSelection: [],
			}

		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//选择
			formateSelection() {
				var result = [],
					array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].Name);
				}
				return result;
			},
			//创建馆藏地
			createLocation() {
				this.createDialog = true;
			},
			//确认创建馆藏地
			confirmCreate(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						HttpServer.httpPost.call(this, '/Api/LibraryLocation/Create', {name:this.createLocationForm.name}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.createDialog = false;
								this.$message({
									type: 'success',
									message: this.$t('message.addSuccess')
								});
								this.getDatas();
							} else {
								this.$message.error(response.data.msg);
							}
						});
					} else {
						return false;
					}
				});
			},
			//批量删除馆藏地信息
			deleteLocation() {
				if(this.formateSelection().length > 0){
            		this.$confirm('此操作将删除所选馆藏地信息，是否继续？','提示',{
              			confirmButtonText:'确定',
              			cancelButtonText:'取消',
              			type:'warning'
            		}).then(() => {
              		HttpServer.httpPost.call(this,'/Api/LibraryLocation/Delete',{name:this.formateSelection()
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getDatas();
								this.$message({
									type: 'success',
									message: this.$t('message.deleteSuccess')
								});
							} else {
								this.$message.error(response.data.msg);
							}
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '操作取消'
						});
					});
				} else {
					this.$alert(this.$t('message.selectBulkDeleteWarning'), this.$t('message.warning'), {
						confirmButtonText: this.$t('message.yes'),
						type: 'warning'
					});
				}
			},
			// 修改馆藏地信息
			editLocation(row){
				this.editLocationForm.name = row.Name;
				this.editLocationForm.keyid = row.LocationKeyId;
				this.editDialog = true;
			},
			//确认修改馆藏地信息
			confirmEdit(formName){
				this.$refs[formName].validate((valid) => {
					if(valid){
						HttpServer.httpPost.call(this, '/Api/LibraryLocation/UpdateName', {info: [this.editLocationForm]}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.editDialog = false;
								this.$message({
									type: 'success',
									message: this.$t('message.saveSuccess')
								});
								this.getDatas();
							} else {
								this.$message.error(response.data.msg);
							}
						});
					}else{
						return false;
					}
				})
			},
			//去掉时间中的T
      		formateData(array){
         		for(var i=0;i<array.length;i++){
          			var index1=array[i].CreateTime.indexOf("T");
          			var index2=array[i].UpdateTime.indexOf("T");
          			array[i].CreateTime=array[i].CreateTime.substring(0,index1)+" "+array[i].CreateTime.substring(index1+1,index1+9);
          			array[i].UpdateTime = array[i].UpdateTime.substring(0,index2) + " " + array[i].UpdateTime.substring(index2+1,index2+9);
         		}
      		},
      		//详情
      		locationDetail(row){
      			this.$emit('changeView','Detail',row);
      		},
      		//同步观藏地信息
      		syncLocation(){
      			HttpServer.httpGet.call(this,'/Api/LibraryLocation/SynLocation?uid=' +GloabFun.getUid(),function(response){},function(response){
      				if(response.data.code === 0){
      					this.$message({
      						type:'success',
      						message:'数据同步成功'
      					})
      				}else{
      					this.$message.error(response.data.msg);
      				}
      			})
      		},
			//刷新
			reloadDatas(){
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/LibraryLocation/info?locationKeyId=&index=' + this.currentPage + '&pageSize=' + this.pageSize, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.formateData(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;
						this.$message({
							type:'success',
							message:this.$t('message.refreshSuccess')
						});
					} else {
						this.$message.error(response.data.msg);
					}
				});
			},
			//查询数据
			getDatas() {
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/LibraryLocation/info?locationKeyId=&index=' + this.currentPage + '&pageSize=' + this.pageSize, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.formateData(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;
					} else {
						this.$message.error(response.data.msg);
					}
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
  .main {
    background-color: #fff;
    border-radius: 10px;
  }
	.flex-inline {
		display: flex;
		justify-content: space-between;
		padding-bottom: 2px;
		padding-top: 5px;
		.query {
			display: flex;
		}
	}
	
	.name {
		color: #20a0ff;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>